import React from 'react';
import {connect} from 'react-redux'

class App extends React.Component{
  constructor(props){
      super(props)
      this.state={
      }
      console.log(props)
  }

  render(){
   return (
       <div>
       {this.props.count}
       <button onClick={this.props.addCount.bind(this)}>+</button>
       <button onClick={this.props.decCount.bind(this)}>-</button>
       </div>  
   )
  }
}

// 使用react-redux的connect将store的state和dispatch都传入到App组件中(映射)
function mapStateToProps(state){
   return {
       count:state
   }
}
function mapDispatchToProps(dispatch){
   return{
       addCount(){
           dispatch({
               type:"INCRNMENT"
           })
       },
       decCount(){
           dispatch({
               type:"DECREMENT"
           })
       }
   }
}

// connect传入mapStateToProps和mapDispatchToProps

export default connect(mapStateToProps,mapDispatchToProps)(App);

// -----------connect内部执行-----------------
// function connect(mapStateToProps,mapDispatchToProps){
//     // 返回一个函数,改函数再传入一个app组件作为参数
//   return function(App){
//         return class WrapApp extends React.Component{
//             render(){
//                 let state=store.getState()
//                 let prop11=mapStateToProps(state)
//                 let dispatch=store.dispatch()
//                 let props2=mapDispatchToProps(dispatch)
//                 let props={...prop11,...props2}
//                return (
//                    <div>
//                        <App props/>
//                    </div>
//                )
//             }
//         }
//   }

// }